<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <link rel="stylesheet" href="./css/common.css" />

    <style>
      .item {
        height: 50px;
        border-bottom: 1px solid #ebebee;
      }

      nav {
        height: 50px;
      }

      .btn {
        width: 40%;
        height: 40px;
      }

      .btn.del {
        background-color: red;
      }
    </style>
  </head>

  <body>
    <nav class="bg-fff f20 aic flex pl-10">
      <a href="./list.html" style="width: 50px">返回</a>
      <span class="fcc fg1">用户详情</span>
      <span style="width: 50px"></span>
    </nav>
    <ul class="mt-10" id="box">
      <li class="bg-fff item flex jc-sb pl-15 pr-15 aic f16 rel">
        <span class="f14">用户名</span>
        <span class="f14">abc</span>
      </li>
      <li class="bg-fff item flex jc-sb pl-15 pr-15 aic f16 rel">
        <span class="f14">昵称</span>
        <span class="f14">张飞</span>
      </li>
      <li class="bg-fff item flex jc-sb pl-15 pr-15 aic f16 rel">
        <span class="f14">年龄</span>
        <span class="f14">29岁</span>
      </li>
      <li class="bg-fff item flex jc-sb pl-15 pr-15 aic f16 rel">
        <span class="f14">职业</span>
        <span class="f14">前端工程师</span>
      </li>
      <li class="bg-fff item flex jc-sb pl-15 pr-15 aic f16 rel">
        <span class="f14">爱好</span>
        <span class="f14">羽毛球,篮球,足球</span>
      </li>
    </ul>

    <div class="fcc mt-30">
      <button class="btn edit">
        <a href="./edit.html" class="fff">编辑</a>
      </button>
      <button class="del btn ml-15">删除</button>
    </div>
 
  </body>
</html>
